<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的积分</title>
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
    <style type="text/css">
		body{margin: 0}
			#header-bg{
				overflow: hidden;
			}
			.content-box{
				width: 90%;
				margin: 0 auto;position: absolute;top:60%;left: 50%;transform: translate(-50%,-50%);
			}
			#header-bg{width: 100%;box-sizing: border-box;overflow: hidden;position: relative;}
      .bg-color{
background-image: url(../../image/number_bg.png);width: 100%;height: 232px;background-repeat: no-repeat;;background-position:bottom center;background-size: cover;box-sizing: border-box;
      }
			.title-box{
				width: 100%;
				height: 215px;
				color: #fff;
			}
			.title-box img{
				width: 7px;
				height: 12px;
				display: inline-block;
			}
			.text-p{
				font-size: 14px;
				text-align: center;
				transform: translateY(-12px);
				color: #fff;
			}
			.title-box h1{
				font-size: 36px;
				text-align: center;
				margin-top: 60px;margin-bottom: 10px;
			}
			.title-box span{
				display: block;
				text-align: center;
				margin-top: 10px;
			}

			/*积分统计*/
			.title-box-line{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width:100%;
				height: 81px;
				background-color: #FFFFFF;
				border-radius: 20px;
				margin: 0 auto;
				text-align: center;box-sizing: border-box;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
			.title-main{
				width: 33.3%;
				height: 81px;
				float: left;
				text-align: center;
			}
			.title-main img{
				width: 25px;
				height: 25px;
				margin-top: 18px;margin-bottom: 8px;
			}
			.title-main p{
				font-size: 12px;margin-top: 0;
				color: #666;
			}
			.head-title-number{
				position: relative;
				padding: 30px 0 30px 0;
				border-bottom: 1px solid #F4F4F4;background-color: #fff
			}
			.user-name-number{
				text-align: center;
				position: absolute;
				top: 50%; left: 3%;
				z-index: 999;
				transform: translateY(-50%);
			}
			#name-id-numer{
				color: #333333;
				font-size: 14px !important;
				text-align: left;
			}
			.number-box{
				width: 100%;
				height: 90%;
				border-radius: 15px;
				margin: 70px auto;
				padding: 15px 0;margin-top: 0
				}
			.box-demo-number{
				height: 20px;
				line-height: 20px;
				text-align: left;
				color: #9D9D9D;
				margin-top: 10px;
				font-size: 12px;
			}
			.box-demo-number{
					height: 20px;
					line-height: 20px;
					text-align: left;
					color: #9D9D9D;
					margin-top: 10px;
					font-size: 12px;
				}
				.box-sign-star{
					position: absolute;
					top: 30px;
					right:30px;
					width: 100px;
					height: 30px;
					font-size: 18px;
					text-align: right;
					}
				.signin{ display: inline-block;}
				.numbershow{display: block!important;}
				.show_c{display: none}

    </style>
	</head>
	<body >
	<!--我的积分-->
	<section class="aui-head" id="header-bg">
		<div class="bg-color"></div>
		<div class="content-box">
			<div class="title-box" id="numbershowti" >
				<h1 id="jifen">000</h1>
				<span>可用积分</span>
			</div>
		</div>
	</section>
		<!--积分统计-->
		<div style="width:100%;box-sizing:border-box;padding:0 15px;" id="numbershow">
		 <section class="aui-content" style="background-color:#F5F5F5;width:100%;box-sizing:border-box;position:relative;top:-50px;">
			<nav class="title-box-line" id="nav">
				<div class="title-main number-left menu1 selected"  tapmode="selected" onclick="fnSetNavMenuSelected(0)" >
					<img src="../../image/mx.png" alt="">
					<p>积分明细</p>
				</div>
				<div class="title-main number-left menu1 "   tapmode="selected" onclick="fnSetNavMenuSelected(1)">
					<img src="../../image/mx1.png" alt="">
					<p>积分收入</p>
				</div>
				<div class="title-main number-left menu1 "   tapmode="selected" onclick="fnSetNavMenuSelected(2)">
					<img src="../../image/mx2.png" alt="">
					<p>积分支出</p>
				</div>
			</nav>
			<div class="number-box" style="margin-top:50px;position:absolute;top:30px;">
				<div style="position:absolute;width:100%"  class="show_c numbershow" >
										<div class="aui-media-list-item-inner head-title-number" style="margin-top: 0;" v-for="site in jflist1">
	                    <div class="aui-list-item-inner aui-list-item-arrow user-name-number" >
	                        <div class="aui-list-item-text text-white aui-font-size-18" id="name-id-numer">{{site.title}}</div>
	                        <div class="aui-list-item-text text-white">
	                           <div class="box-demo-number">{{site.time}}</div>
	                        </div>
	                    </div>
											<div class="aui-list-item-inner aui-list-item-arrow signin">
	                         <div class="aui-list-item-text text-white">
	                           <div class="box-sign-star">{{site.number>0?"+":""}}{{site.number}}</div>
	                        </div>
	                	</div>
	                </div>
				</div>
				<div style="position:absolute;width:100%"  class="show_c"  >
										<div class="aui-media-list-item-inner head-title-number" style="margin-top: 0;" v-for="site in jflist2">
											<div class="aui-list-item-inner aui-list-item-arrow user-name-number" >
													<div class="aui-list-item-text text-white aui-font-size-18" id="name-id-numer">{{site.title}}</div>
													<div class="aui-list-item-text text-white">
														 <div class="box-demo-number">{{site.time}}</div>
													</div>
											</div>
											<div class="aui-list-item-inner aui-list-item-arrow signin">
													 <div class="aui-list-item-text text-white">
														 <div class="box-sign-star">{{site.number>0?"+":""}}{{site.number}}</div>
													</div>
										</div>
									</div>
				</div>
				<div style="position:absolute;width:100%"  class="show_c" >
										<div class="aui-media-list-item-inner head-title-number" style="margin-top: 0;" v-for="site in jflist3">
											<div class="aui-list-item-inner aui-list-item-arrow user-name-number" >
													<div class="aui-list-item-text text-white aui-font-size-18" id="name-id-numer">{{site.title}}</div>
													<div class="aui-list-item-text text-white">
														 <div class="box-demo-number">{{site.time}}</div>
													</div>
											</div>
											<div class="aui-list-item-inner aui-list-item-arrow signin">
													 <div class="aui-list-item-text text-white">
														 <div class="box-sign-star">{{site.number>0?"+":""}}{{site.number}}</div>
													</div>
										</div>
									</div>
				</div>
			</div>
		</section>
		</div>
	</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
apiready = function(){

 				var z=api.pageParam.number;

				$api.text($api.byId('jifen'),z);
			numbershow =new Vue({
			 el: '#numbershow',
			 data: $tools.getdata()
			}

		)

jifen_ajax()

     };


var numbershow;

function jifen_ajax(){
		api.ajax({
		    url: $api.getStorage("backapi")+'/index.php?c=home&m=experience&uid='+$api.getStorage("member"),
		    method: 'GET',
		},function(ret, err){
		    if (ret.status) {
						numbershow.jflist1 = ret.status.list;
						numbershow.jflist2 = ret.status.list2;
						numbershow.jflist3 = ret.status.list1;
		      //  console.log( JSON.stringify( ret ) );
		    } else {
		      //  console.log( JSON.stringify( err ) );
		    }
		});


}


function fnSetNavMenuSelected(index_) {
  var menus = $api.domAll(nav, '.menu1');
  var show_c = $api.domAll(".show_c");

    for (var i = 0; i < 3; i++) {
        if (index_ == i) {
            $api.addCls(show_c[i], 'numbershow');
        } else {
          $api.removeCls(show_c[i], 'numbershow');
        }
    }
}


		 </script>
</html>
